<template>
  <div class='main'>
    <!-- 我的购物车头部 -->
    <div class="cart-header">
      <div class="cart-header-content">
        <p>
          <i class="el-icon-s-order" style="font-size: 30px;color: #ff6700;"></i>
          我的购物车
        </p>
      </div>
    </div>
    <!-- 我的购物车头部END -->

    <div class="cart" v-if="cartInfoList[0]">
      <h4>全部商品</h4>
      <div class="cart-main">

        <div class="cart-th">
          <div class="cart-th1">全部</div>
          <div class="cart-th2">商品</div>
          <div class="cart-th3">单价（元）</div>
          <div class="cart-th4">数量</div>
          <div class="cart-th5">小计（元）</div>
          <div class="cart-th6">操作</div>
        </div>

        <div class="cart-body">
          <ul class="cart-list" v-for="(cart, index) in cartInfoList" :key="index">
            <li class="cart-list-con1">
              <input type="checkbox" name="chk_list" :checked="cart.isChecked == 1" @change="changeChecked(cart, $event)">
              <!-- @change="cart.isChecked==1?cart.isChecked=2:cart.isChecked=1" -->
            </li>
            <li class="cart-list-con2">
              <router-link :to="`/detail/${cart.goods_id}`">
                <img :src="cart.goods_img">
                <div class="item-msg">{{ cart.goods_name }}</div>
                <div class="item-msg">{{ cart.goods_title }}</div>
              </router-link>
            </li>
            <li class="cart-list-con4">
              <span class="price">{{ cart.goods_price }}</span>
            </li>
            <li class="cart-list-con5">
              <a href="#none" class="mins" @click="handler('minus', -1, cart)">-</a>
              <input autocomplete="off" type="text" :value="cart.goods_num" minnum="1" class="itxt"
                @change="handler('change', $event.target.value * 1, cart)">
              <a href="#none" class="plus" @click="handler('add', 1, cart)">+</a>
            </li>
            <li class="cart-list-con6">
              <span class="sum">{{ cart.goods_price * cart.goods_num }}</span>
            </li>
            <li class="cart-list-con7">
              <a href="#none" class="sindelet" @click="deleteCartById(cart.goods_id)">删除</a>
            </li>
          </ul>
        </div>

      </div>

      <div class="cart-tool">
        <div class="select-all">
          <input class="chooseAll" type="checkbox" :checked="isAllCheck" @change="updateAllCartChecked">
          <span>&nbsp全选</span>
        </div>
        <div class="option">
          <a href="#none" @click="deleteAllCheckedCart()">删除选中的商品</a>
        </div>
        <div class="money-box">
          <div class="chosed">已选择
            <span>{{ totalNum }}&nbsp</span>件商品
          </div>
          <div class="sumprice">
            <em>总价 ：</em>
            <i class="summoney">{{ totalPrice }}</i>
          </div>
          <div class="sumbtn">
            <router-link class="sum-btn" to="/trade">结算</router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 购物车为空的时候显示的内容 -->
    <div v-else class="cart-empty">
      <div class="empty">
        <h2>您的购物车还是空的！</h2>
        <p>快去购物吧！</p>
      </div>
    </div>
    <!--购物车为空的时候显示的内容END -->

  </div>
</template>

<script>
import { mapGetters } from "vuex";
//引入节流
import throttle from 'lodash/throttle'

export default {
  name: 'ShopCart',
  mounted() {
    this.getData();
  },
  methods: {
    //获取个人购物车
    getData() {
      this.$store.dispatch('getCartList')
    },
    //修改某一个产品的个数(节流)
    handler: throttle(async function (type, disNum, cart) {
      //skuNum是变化量，有正负
      if (type == 'add') {
        disNum = 1;
      }
      if (type == 'minus') {
        //如果产品数为1，就变化量为0
        if (cart.goods_num > 1) {
          disNum = -1;
        } else {
          disNum = 0;
        }
      }
      if (type == 'change') {
        if (isNaN(disNum) || disNum < 1) {
          disNum = 0;
        } else {
          disNum = parseInt(disNum) - cart.goods_num;
        }
      }
      //派发action
      await this.$store.dispatch('addOrUpdateShopCart', { skuId: cart.goods_id, skuNum: disNum });
      this.getData();
    }, 1000),

    //删除某一个产品的操作
    async deleteCartById(skuId) {
      try {
        //如果删除能够再次请求获取新的数据进行展示
        await this.$store.dispatch('deleteCartListBySkuId', skuId);
        this.getData();
      } catch (error) {
        alert(error.message)
      }
    },
    //修改购物车中产品勾选状态
    async changeChecked(cart, event) {
      try {
        let isChecked = event.target.checked ? '1' : '0';
        await this.$store.dispatch('updateCheckedById', { skuId: cart.goods_id, isChecked });
        this.getData();
      } catch (error) {
        alert(error.message)
      }

    },
    //购物车删除选中产品
    async deleteAllCheckedCart() {
      try {
        await this.$store.dispatch('deleteAllCheckedCart')
        this.getData();
      } catch (error) {
        alert(error.message)
      }
    },
    //修改购物车中全部产品勾选状态
    async updateAllCartChecked(event) {
      try {
        let isChecked = event.target.checked ? '1' : '0';
        await this.$store.dispatch('updateAllCartIsChecked', isChecked);
        this.getData()
      } catch (error) {
        alert(error.message)
      }
    }
  },
  computed: {
    ...mapGetters(['cartList']),
    //购物车数据
    cartInfoList() {
      return this.cartList || []
    },
    //计算购买产品总价
    totalPrice() {
      let sum = 0;
      this.cartInfoList.forEach(item => {
        if (item.isChecked == 1) {
          sum = sum + item.goods_num * item.goods_price
        }
      });
      return sum;
    },
    //计算购买商品总数
    totalNum() {
      let sum = 0;
      this.cartInfoList.forEach(item => {
        if (item.isChecked == 1) {
          sum = sum + item.goods_num
        }
      });
      return sum;
    },
    //全部产品是否都打勾
    isAllCheck() {
      //当数组内所有isChecked都为1时返回true,否则为false
      return this.cartInfoList.every(item => item.isChecked == 1);
    },
  },
}
</script>

<style lang="less" scoped>
.main {
  background-color: #f5f5f5;

  .cart-header {
    height: 64px;
    border-bottom: 2px solid #ff6700;
    background-color: #fff;
    margin-bottom: 20px;

    .cart-header-content {
      width: 1225px;
      margin: 0 auto;
    }

    p {
      font-size: 28px;
      line-height: 58px;
      float: left;
      font-weight: normal;
      color: #424242;
    }
  }

  .cart {
    width: 1200px;
    margin: 0 auto;

    h4 {
      margin: 9px 0;
      font-size: 14px;
      line-height: 21px;

    }

    .cart-main {
      .cart-th {
        // background: #f5f5f5;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 10px;
        overflow: hidden;

        &>div {
          float: left;
        }

        .cart-th1 {
          width: 25%;

          input {
            vertical-align: middle;
          }

          span {
            vertical-align: middle;
          }
        }

        .cart-th2 {
          width: 25%;
        }

        .cart-th3,
        .cart-th4,
        .cart-th5,
        .cart-th6 {
          width: 12.5%;

        }
      }

      .cart-body {
        margin: 15px 0;
        border: 1px solid #ddd;
    background-color: #fff;

        .cart-list {
          padding: 10px;
          border-bottom: 1px solid #ddd;
          overflow: hidden;
          height: 82px;
          display: flex;
          align-items: center;

          &>li {
            float: left;
          }

          .cart-list-con1 {
            width: 15%;
          }

          .cart-list-con2 {
            width: 35%;

            img {
              width: 82px;
              height: 82px;
              float: left;
            }

            .item-msg {
              float: left;
              width: 150px;
              margin: 0 10px;
              line-height: 18px;
            }
          }

          .cart-list-con4 {
            width: 10%;

          }

          .cart-list-con5 {
            width: 17%;
            a{
              height: 16px;
            }
            .mins {
              border: 1px solid #ddd;
              border-right: 0;
              float: left;
              color: #666;
              width: 6px;
              text-align: center;
              padding: 8px;
            }

            input {
              border: 1px solid #ddd;
              width: 40px;
              height: 32px;
              float: left;
              text-align: center;
              font-size: 14px;
            }

            .plus {
              border: 1px solid #ddd;
              border-left: 0;
              float: left;
              color: #666;
              width: 6px;
              text-align: center;
              padding: 8px;
            }
          }

          .cart-list-con6 {
            width: 10%;

            .sum {
              font-size: 16px;
            }
          }

          .cart-list-con7 {
            width: 13%;

            a {
              color: #666;
            }
          }
        }
      }
    }

    .cart-tool {
      overflow: hidden;
      border: 1px solid #ddd;
      background-color: #fff;

      .select-all {
        padding: 10px;
        overflow: hidden;
        float: left;

        span {
          vertical-align: middle;
        }

        input {
          vertical-align: middle;
        }
      }

      .option {
        padding: 10px;
        overflow: hidden;
        float: left;

        a {
          float: left;
          padding: 0 10px;
          color: #666;
        }
      }

      .money-box {
        float: right;

        .chosed {
          line-height: 26px;
          float: left;
          padding: 0 10px;
          margin-top: 15px;
          margin-left: 100px;

          span {
            color: #c81623;
          }
        }

        .sumprice {
          width: 200px;
          line-height: 22px;
          float: left;
          margin-top: 15px;

          padding: 0 10px;

          .summoney {
            color: #c81623;
            font-size: 16px;
          }
        }

        .sumbtn {
          float: right;

          a {
            display: block;
            position: relative;
            width: 96px;
            height: 52px;
            line-height: 52px;
            color: #fff;
            text-align: center;
            font-size: 18px;
            font-family: "Microsoft YaHei";
            background: #e1251b;
            overflow: hidden;
          }
        }
      }
    }
  }

  /* 订单为空的时候显示的内容CSS */
  .cart-empty {
    width: 1225px;
    margin: 0 auto;

    .empty {
      height: 300px;
      padding: 0 0 130px 558px;
      margin: 65px 0 0;
      color: #b0b0b0;
      overflow: hidden;

      h2 {
        margin: 70px 0 15px;
        font-size: 36px;
      }

      p {
        margin: 0 0 20px;
        font-size: 20px;
      }
    }
  }

  /* 订单为空的时候显示的内容CSS END */
}</style>